package com.gitee.wsl.css.components

import com.gitee.wsl.css.selector.builder.classRuleSet
import com.gitee.wsl.css.rule.RuleSet
import com.gitee.wsl.css.dimensions.css_px
import com.gitee.wsl.css.property.sample.Alignment
import com.gitee.wsl.css.property.sample.alignItems
import com.gitee.wsl.css.property.sample.boxSizing
import com.gitee.wsl.css.property.sample.display
import com.gitee.wsl.css.property.sample.flexDirection
import com.gitee.wsl.css.property.sample.flexShrink
import com.gitee.wsl.css.property.sample.isScrollableHorizontally
import com.gitee.wsl.css.property.sample.isScrollableVertically
import com.gitee.wsl.css.property.sample.margin
import com.gitee.wsl.css.property.sample.padding

class BaseStyles(private val page: PageInterface) {

    private fun ruleSet(rules: RuleSet.() -> Unit) = page.classRuleSet( null, rules)

    val linearLayoutClass = ruleSet {
        alignItems = Alignment.Start
        display = "inline-flex"
    }

    val verticalLayoutClass = ruleSet {
        flexDirection = "column"
    }

    val horizontalLayoutClass = ruleSet {
        flexDirection = "row"
    }

    val gridLayoutClass = ruleSet {
        display = "grid"
    }

    val baseClass = ruleSet {
        boxSizing = "border-box"
        margin = 0.css_px
        padding = 0.css_px
        flexShrink = "0"
    }

    val invisibleClass = ruleSet {
        display = "none !important"
    }

    val verticalScrollLayoutClass = ruleSet {
        isScrollableVertically = true
        isScrollableHorizontally = false
    }
    val horizontalScrollLayoutClass = ruleSet {
        isScrollableHorizontally = true
        isScrollableVertically = false
    }
}